<script setup lang='ts'>
import { ref } from 'vue';
import Child from './14_父子通信中的子组件.vue'
const username = ref('张三')
const age = ref(20)
const changeInfo = () => {
    username.value = '李四'
    age.value++
}
const receiveAgeFunc = (count: number) => {
    age.value = count
}
const receiveNameFunc = (name: string) => {
    username.value = name
}
const receiveAllFunc = (name: string, count: number) => {
    age.value = count
    username.value = name
}
</script>

<template>
    <div>
        <h1>当前的父组件</h1>
        <p>姓名:{{ username }}</p>
        <p>年龄:{{ age }}</p>
        <button @click="changeInfo">父组件修改内容</button>
    </div>
    <Child :name="username" :age=age :func="receiveAgeFunc" @update-age="receiveAgeFunc" @update-name="receiveNameFunc"
        @update-all="receiveAllFunc"></Child>
</template>

<style scoped></style>